<template>
	<div>
		<van-index-bar>
			<template v-for="v in carData">
				<van-index-anchor :index="v.info.pinyin" v-if="v.type === '1000'" :key="v.info.brand_id" />
				<van-cell v-else 
				@click="$router.push({ name: 'carDetail', params: { brand_id: v.info.brand_id } })"

				:title="v.info.brand_name" :key="v.info.brand_id" :icon="v.info.image_url" />
			</template>
		</van-index-bar>
	</div>
</template>


<script setup lang="ts">
import { fetchCar } from '@/api'
import { computed, onMounted, ref } from 'vue';
interface Car {
	type: string
	info: {
		brand_id: string
		brand_name: string
		dealer_tag: number
		image_url: string
		pinyin: string
		series_count: number
	}
}


const car = ref<Car[]>([])

const carData = computed(() => {
	const s = car.value.filter(v => v.type === '1000' || v.type === '1001')
	console.log(s);
	return s
})

onMounted(() => {
	fetchCar().then(resp => {
		console.log(resp.data.data);
		car.value = resp.data.data
	})
})
</script>